class ChatField{
    constructor(playground){
        this.playground = playground;

        this.$history = $(`<div class = "ac-game-chat-field-history">历史记录</div>`);
        this.$input = $(`<input type = "text" class = "ac-game-chat-field-input"></input>`);
        this.$history.hide();
        this.$input.hide();
        this.func_id = null;

        this.playground.$playground.append(this.$history);
        this.playground.$playground.append(this.$input);
        
        this.start();
    }
    start(){
        let outer = this;
        this.add_listening_events();
    }
    add_listening_events(){
        let outer = this;
        this.$input.keydown(function(e){
        if (e.which === 27){//ESC
            outer.hide_input();
            return false;
        }else if(e.which === 13){
            let username= outer.playground.root.settings.username;
            let text = outer.$input.val();
            outer.hide_input();
            if(text){
                outer.$input.val("");
                outer.add_message(username,text);
                
                outer.playground.mps.send_message(text);
            }
            return false;
        }
    })
}
    show_input(){
        this.show_history();
        this.$input.show();
        this.$input.focus();
    }

    show_history() {
        let outer = this;
        this.$history.fadeIn();
        if(this.func_id) clearTimeout(this.func_id);
        this.func_id=setTimeout(function(){
            outer.$history.fadeOut();
            outer.func_id = null;
        },3000);
    }

    add_message(username,text){
        this.show_history();
        let message = `[${username}]${text}`;
        this.$history.append(this.render_message(message));
        this.$history.scrollTop(this.$history[0].scrollHeight);
    }
    render_message(message){
        return $(`<div>${message}</div>`);
    }

    hide_input(){
        this.$input.hide();
        this.playground.game_map.$canvas.focus();
    }

}
